<template>
  <div
    v-if="addBoxType == 1"
    class="box"
    :class="isActive ? 'active' : ''"
    style="position: relative; border-radius: 10px"
  >
    <div>
      <span>{{ address.linkUser }}</span>
    </div>
    <hr style="margin: 10px 0; font-size: 1px" />
    <span>{{ address.linkPhone }}</span>
    <span>{{ address.linkAddress }}</span>
    <div style="margin-top: 5px">
      <a
        @click="emit('edit')"
        style="
          color: #710a0a;
          cursor: pointer;
          position: absolute;
          bottom: 10px;
        "
        >修改</a
      >
      <a
        @click="emit('delete')"
        style="
          color: #710a0a;
          cursor: pointer;
          float: right;
          position: absolute;
          bottom: 10px;
          right: 10px;
        "
        >删除</a
      >
    </div>
  </div>
  <div
    v-else-if="addBoxType == 2"
    class="box1"
    :class="isActive ? 'active1' : ''"
    style="position: relative; border-radius: 10px"
  >
    <span>{{ address.linkUser }}</span>
    <span>{{ address.linkPhone }}</span>
    <span>{{ address.linkAddress }}</span>
    <div style="margin-top: 5px">
      <a
        @click="emit('edit')"
        style="color: #710a0a; cursor: pointer; margin-right: 10px"
        >修改</a
      >
      <a @click="emit('delete')" style="color: #710a0a; cursor: pointer"
        >删除</a
      >
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from "vue";

defineProps({
  address: {
    type: Object,
    default: () => ({}),
  },
  isActive: {
    type: Boolean,
    default: false,
  },
  addBoxType: {
    type: Number,
    default: 2,
  },
});

const emit = defineEmits(["edit", "delete"]);
</script>

<style scoped>
.box {
  padding: 10px;
  width: 300px;
  height: 120px;
  display: inline-block;
  border: #333333 1px solid;
}
.box1 {
  padding: 10px;
  width: 300px;
  height: 60px;
  display: inline-block;
  border: #333333 1px solid;
}
.active {
  border: black 5px solid;
}
.active1 {
  border: rgb(244, 11, 11) 2px solid;
  background-color: #cbf1e0;
}
</style>
